<!doctype html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<style type="text/css">
		body{
			text-align: center;
		}
		#box{
			width: 200px;
			height: 100px;
			background: blue url() 0 0 no-repeat;
			border: 5px solid red;
			margin: 0 auto;
			text-align: center;
			font-size: 40px;
			color: #fff;
			line-height: 100px;
		}
		input{
			margin-top: 20px;
		}
	</style>
	<script type="text/javascript">

		window.onload = function  () {
			users = ['大明','陈红','大明','马林','大明','林马','菜花','老陈'];
			box = document.getElementById('box');
			btn = document.getElementById('btn');


			btn.onclick = function  () {
				if(btn.value=="停止"){
					btn.value="开始";
					is_add = true;

				}else{
					btn.value="停止";
					cn =500;
					time = setTimeout(run, cn);
				}
			}

			num = 0;

			is_add = false;

			color = true;

			function run () {

				if(color){
					box.style.borderColor='red';
					color = false;
				}else{
					box.style.borderColor='yellow';
					color =  true;
				}

				box.innerHTML = users[num];

				if(num==(users.length-1)){
					num = 0;
				}else{
					num++;
				}

				console.log(cn);
				console.log(is_add);

				
				if(is_add){
					cn +=10;
				}else{
					if(cn==50){
						cn=50;
					}else{
						cn -=10;
					}
				}

				if(cn<800){
					setTimeout(run, cn);
				}else{
					alert("恭喜:"+users[num]+"中奖");
				}
			}

		}



	</script>
</head>
<body>
	<div id="box">开始抽奖</div>
	<input id="btn" type="button" value="开始">
</body>
</html>